<template>
  <div class="layer-pie-wrap flex-row">
    <div :class="`wrap-image-bg layer-pie ${skin}`">
      <section :id="pieId" class="pie-chart"></section>
    </div>
    <div class="split-line"></div>
    <ul class="legend-wrap flex-column">
      <li class="item-legend flex-column" v-for="(item, idx) in datas" :key="idx">
        <label class="item-name"><span class="rect-icon"></span>{{item.name}}</label>
        <label class="item-value"><span class="right-angle"></span>{{item.value}}</label>
      </li>
    </ul>
  </div>
</template>
<script>
import {resizeChart, pieOptions} from '@/assets/js/echartOptions.js'
export default {
  name: "LayerPie",
  props: {
    // 饼图id
    pieId: {
      type: String,
      default: 'layerPie'
    },
    // 饼图底图颜色
    skin: {
      type: String,
      default: 'yellow'  // green | yellow
    },
    // 饼图数据
    datas: {
      type: Array,
      default: () => []
    },
    // 饼图数据名
    name: {
      type: String,
      default: ''
    },
    // 饼图半径
    radius: {
      type: Array,
      default: () =>  ['42%', '56%']
    },
    // 间隔颜色
    borderColor: {
      type: String,
      default: 'rgba(10, 29, 49, 1)'
    },
    // 饼图的颜色
    colors: {
      type: Array,
      default: () => ["rgba(255, 231, 77, .6)", "rgba(60, 255, 180, .6)", "rgba(60, 167, 255, .6)", "rgba(230, 130, 238, .6)"]
    },
    // 是否显示表表经过
    isShowTooltip: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      pieChart: null,
      options: null
    };
  },
  watch: {
    datas(val) {
      this.options.datas = val;
      this.pieChart.setOption(pieOptions({...this.options}));
    }
  },
  mounted(){
    this.pieChart =  this.$echarts.init(document.querySelector(`#${this.pieId}`));
    this.options = {
        name: this.name,
        radius: this.radius,
        datas: this.datas,
        borderColor: this.borderColor,
        colors: this.colors,
        isShowTooltip: this.isShowTooltip,
        skin: this.skin
    };
    this.pieChart.setOption(pieOptions({...this.options}));
    resizeChart(this.pieChart)
  }
};
</script>

<style lang="less" scoped>
  .layer-pie-wrap {
    width: 100%;
    height: 182px;
    align-items: center;
    overflow: hidden;
    .layer-pie {
      .pie-chart {
        height: 100%;
        width: 100%;
        transform: skew(42deg, -21deg) translate(6px);
        overflow: hidden;
      }
    }
    .split-line {
      margin: 0 10px;
      width: 2px;
      height: 162px;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5548) 50%, rgba(216,216,216,0) 100%);
    }
    .legend-wrap {
      height: 182px;
      justify-content: space-evenly;
      .item-legend {
        .item-value,
        .item-name {
          font-size: 12px;
          font-weight: 400;
          color: #fff;
        }
        .item-value {
          padding-left: 6px;
        }
        .rect-icon {
          margin-right: 20px;
          display: inline-block;
          height: 12px;
          width: 12px;
        }
        .right-angle {
          margin-right: 2px;
          display: inline-block;
          height: 21px;
          width: 21px;
          border-left: 1px dashed #fff;
          border-bottom: 1px dashed #fff;
        }
        &:first-child {
          .rect-icon {
            background: #FFE74D;
          }
          .right-angle {
            border-left-color: #FFE74D;
            border-bottom-color: #FFE74D;
          }
        }
        &:nth-child(2) {
          .rect-icon {
            background: #3CFFB4;
          }
          .right-angle {
            border-left-color: #3CFFB4;
            border-bottom-color: #3CFFB4;
          }
        }
        &:nth-child(3) {
          .rect-icon {
            background: #3CA7FF;
          }
          .right-angle {
            border-left-color: #3CA7FF;
            border-bottom-color: #3CA7FF;
          }
        }
        &:nth-child(4) {
          .rect-icon {
            background: #EC9DEE;
          }
          .right-angle {
            border-left-color: #EC9DEE;
            border-bottom-color: #EC9DEE;
          }
        }
      }
    }
  }
</style>
